<template>
  <div class="Transfer">
    <!-- 左侧区域 -->

    <div class="son border-r-line">
      <a-tree
        :checkedKeys="checkedKeys"
        checkable
        defaultExpandAll
        :selected-keys="selectedKeys"
        :default-selected-keys="defaultSelectedKeys"
        :replace-fields="replaceFields"
        :tree-data="transferData"
        @check="onCheck"
      />
    </div>

    <!-- 右侧区域 -->
    <div class="son pl28">
      <div>表头信息</div>
      <!--使用draggable组件-->
      <draggable
        handle=".mover"
        v-model="rightData"
        chosenClass="chosen"
        forceFallback="true"
        group="people"
        animation="300"
        @start="onStart"
        filter=".forbid"
        @end="onEnd"
      >
        <transition-group>
          <div v-for="(item, index) in rightData" :key="index" class="dsy_sb">
            <div class="display-flex ai-center texts">
              <div class="w30  mover" :class="item.disableCheckbox ? 'forbid' : ''">
                <a-icon type="unordered-list" />
              </div>
              {{ item.name }}
            </div>
            <a-space>
              <a-tooltip placement="top" v-if="index !== 0 && !item.disableCheckbox">
                <template slot="title">
                  <span>向上移动</span>
                </template>
                <a-icon type="vertical-align-top" class="" @click="transposition(index, index - 1)" />
              </a-tooltip>
              <a-tooltip placement="top" v-if="index < rightData.length - 1 && !item.disableCheckbox">
                <template slot="title">
                  <span>向下移动</span>
                </template>
                <a-icon class="" type="vertical-align-bottom" @click="transposition(index, index + 1)" />
              </a-tooltip>

              <a-icon type="close" @click="remove(index)" v-if="!item.disableCheckbox" />
            </a-space>
          </div>
        </transition-group>
      </draggable>
    </div>
  </div>
</template>

<script>
// 导入draggable组件
import draggable from "vuedraggable";
export default {
  // 注册draggable组件
  components: {
    draggable
  },
  data() {
    return {
      drag: false,
      rightData: [],
      expandedKeys: [],
      checkedKeys: [],
      selectedKeys: [],
      replaceFields: {
        children: "groupItem",
        title: "name",
        key: "enName"
      }
    };
  },
  created() {
    this.checkedKeys = this.checkedKey.checkedKeys;
    this.rightData = this.checkedKey.rightData;
  },
  watch: {
    checkedKey(data) {
      this.checkedKeys = data.checkedKeys;
      this.rightData = data.rightData;
    }
  },

  props: {
    transferData: {
      type: Array,
      default: () => []
    },
    defaultSelectedKeys: {
      type: Array,
      default: () => []
    },
    checkedKey: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
    remove(index) {
      this.checkedKeys.forEach((element, i) => {
        if (this.rightData[index].enName === element) {
          this.checkedKeys.splice(i, 1);
        }
      });
      this.rightData.splice(index, 1);
    },
    transposition(index1, index2) {
      this.rightData[index1] = this.rightData.splice(index2, 1, this.rightData[index1])[0];
    },
    // 开始拖拽事件
    onStart() {
      this.drag = true;
    },
    // 拖拽结束事件
    onEnd() {
      this.drag = false;
    },

    onCheck(checkedKeys, e) {
      this.checkedKeys = checkedKeys;
      const _this = this;
      checkedKeys.forEach((element, index) => {
        if (isNaN(element)) {
          if (_this.rightData.filter(item => item.enName === element).length === 0) {
            _this.rightData.push(e.checkedNodes[index].data.props);
          }
        }
      });
      const arr = [];
      _this.rightData.forEach((element, index) => {
        if (checkedKeys.filter(item => item === element.enName).length !== 0) {
          arr.push(element);
        }
      });
      this.rightData = arr;
    }
  }
};
</script>

<style lang="scss" scoped>
.Transfer {
  display: flex;
  .son {
    flex: 1;
  }
  .texts {
    line-height: 30px;
  }
}
</style>
